<template>
  <dv-border-box-8 class="device-panel">
    <div class="panel-header">
      <i class="el-icon-cpu"></i>
      设备运行状态
    </div>
    
    <div class="device-content">
      <div class="device-chart-container">
        <div ref="deviceStatusChart" class="device-chart"></div>
      </div>
      
      <div class="device-stats">
        <div class="stat-item" v-for="(item, index) in statItems" :key="index">
          <div class="stat-label">{{ item.label }}</div>
          <div class="stat-value" :class="item.class">{{ item.value }}</div>
        </div>
      </div>
      
      <div class="device-progress">
        <div class="progress-header">
          <span>设备利用率</span>
          <span>{{ deviceData.utilizationRate }}%</span>
        </div>
        <el-progress 
          :percentage="deviceData.utilizationRate" 
          :stroke-width="10" 
          :show-text="false"
          :color="utilizationColor">
        </el-progress>
      </div>
    </div>
  </dv-border-box-8>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  deviceData: {
    type: Object,
    required: true
  }
})

const deviceStatusChart = ref(null)
let chartInstance = null

// 统计项数据
const statItems = computed(() => [
  {
    label: '设备总数',
    value: props.deviceData.total,
    class: 'total'
  },
  {
    label: '运行中',
    value: props.deviceData.running,
    class: 'running'
  },
  {
    label: '空闲',
    value: props.deviceData.idle,
    class: 'idle'
  },
  {
    label: '维护中',
    value: props.deviceData.maintenance,
    class: 'maintenance'
  },
  {
    label: '故障',
    value: props.deviceData.fault,
    class: 'fault'
  }
])

// 利用率颜色
const utilizationColor = computed(() => {
  const rate = props.deviceData.utilizationRate
  if (rate < 60) return '#f56c6c'
  if (rate < 80) return '#e6a23c'
  return '#67c23a'
})

// 初始化图表
const initChart = () => {
  if (!deviceStatusChart.value) return
  
  chartInstance = echarts.init(deviceStatusChart.value)
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#001529',
          borderWidth: 2
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '12',
            fontWeight: 'bold',
            color: '#fff'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: props.deviceData.running, name: '运行中', itemStyle: { color: '#67c23a' } },
          { value: props.deviceData.idle, name: '空闲', itemStyle: { color: '#409eff' } },
          { value: props.deviceData.maintenance, name: '维护中', itemStyle: { color: '#e6a23c' } },
          { value: props.deviceData.fault, name: '故障', itemStyle: { color: '#f56c6c' } }
        ]
      }
    ]
  }
  
  chartInstance.setOption(option)
}

// 更新图表数据
const updateChart = () => {
  if (!chartInstance) return
  
  chartInstance.setOption({
    series: [
      {
        data: [
          { value: props.deviceData.running, name: '运行中' },
          { value: props.deviceData.idle, name: '空闲' },
          { value: props.deviceData.maintenance, name: '维护中' },
          { value: props.deviceData.fault, name: '故障' }
        ]
      }
    ]
  })
}

// 监听窗口大小变化
const handleResize = () => {
  chartInstance && chartInstance.resize()
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  chartInstance && chartInstance.dispose()
})

// 监听数据变化
watch(() => props.deviceData, () => {
  updateChart()
}, { deep: true })
</script>

<style scoped>
.device-panel {
  width: 100%;
  height: 350px;
  position: relative;
  padding: 15px;
}

.panel-header {
  font-size: 16px;
  color: #29b6ff;
  /* margin-bottom: 15px; */
}

.device-content {
  height: calc(100% - 30px);
  display: flex;
  flex-direction: column;
}

.device-chart-container {
  flex: 1;
  position: relative;
}

.device-chart {
  width: 100%;
  height: 100%;
}

.device-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 10px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: #b9e0ff;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
}

.stat-value.total { color: #fff; }
.stat-value.running { color: #67c23a; }
.stat-value.idle { color: #409eff; }
.stat-value.maintenance { color: #e6a23c; }
.stat-value.fault { color: #f56c6c; }

.device-progress {
  margin-top: 15px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #fff;
}

:deep(.el-progress-bar__outer) {
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-progress-bar__inner) {
  border-radius: 10px;
  transition: all 0.6s ease;
}
</style> 